<template>
  <div @click="clickSourceItem">
    <!-- 发送视频,音频,图文资源 -->
    <div v-if="item.msgType == 31 || item.msgType == 32 || item.msgType == 33 || item.msgType == 34 || item.msgType == 35 || item.msgType == 37" class="c-bg-white c-br10 c-ww430 c-textAlign-l">
      <div class="c-ph24 c-pt30 c-pb30 c-bd-b1 c-flex-row">
        <div class="c-maxh90 c-text-hidden" :class="item.msgType == 35 ? 'c-ww90':'c-ww130'">
          <img v-if="item.msgType != 35" class="c-w100 img-pe-none" :src="$addXossFilter(item.voiceDuration, require('@/assets/defult270.png'))" alt="" />
          <img v-else class="c-w100 img-pe-none" :src="$addXossFilter(item.voiceDuration, require('@/assets/examination_defult.png'))" alt="" />
        </div>
        <div class="c-flex-grow1 c-w0 c-pl20 c-pt10 c-fs24 c-text-ellipsis2">
          {{item.content}}
        </div>
      </div>
      <div class="c-hh40 c-flex-row c-aligni-center c-ph24">
        <i v-if="item.msgType == 31" class="iconfont c-fs22 icon-video">&#xe707;</i>
        <i v-else-if="item.msgType == 32" class="iconfont c-fs22 icon-audio">&#xe756;</i>
        <i v-else-if="item.msgType == 33" class="iconfont c-fs22 icon-imgtext">&#xe755;</i>
        <i v-else-if="item.msgType == 34" class="iconfont c-fs22 icon-column">&#xe781;</i>
        <i v-else-if="item.msgType == 35" class="iconfont c-fs22 icon-exam">&#xe78f;</i>
        <i v-else-if="item.msgType == 37" class="iconfont c-fs22 icon-clock">&#xe806;</i>
        <span class="c-fs18 c-fc-gray c-pl10 c-flex-grow1 c-w0">{{mapType[item.msgType]}}</span>
        <span class="c-fs18 c-fc-gray c-pl10">{{mapLook[item.msgType]}}</span>
      </div>
    </div>

    <!-- 发送活动资源 -->
    <div v-else-if="item.msgType == 36" class="c-bg-white c-br10 c-ww430 c-textAlign-l">
      <div class="c-ph24 c-pt20 c-fs24 c-text-ellipsis2">{{item.content}}</div>
      <div class="c-ph24 c-fs16 c-flex-row c-aligni-center c-fc-gray c-pt20 c-pb10">
        <span class="c-flex-grow1 c-w0">{{item.subName}}</span>
        <span v-if="item.subContent">{{item.subContent}}</span>
      </div>
      <div class="c-mh24 c-ww380 c-amxh190 c-text-hidden c-mb20">
        <img class="c-w100 img-pe-none" :src="$addXossFilter(item.voiceDuration, require('@/assets/activity_defult.png'))" alt="" />
      </div>
      <div class="c-hh40 c-flex-row c-aligni-center c-ph24 c-bd-t1">
        <i class="iconfont c-fs22 icon-activity">&#xea0b;</i>
        <span class="c-fs18 c-fc-gray c-pl10 c-flex-grow1 c-w0">{{mapType[item.msgType]}}</span>
        <span class="c-fs18 c-fc-gray c-pl10">{{mapLook[item.msgType]}}</span>
      </div>
    </div>
  </div>

</template>

<script>
import { goDetails } from "@/utils/goDetails.js";
export default {
  name: "socailSourceMessage",
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      mapType: {
        31: '视频',
        32: '音频',
        33: '图文',
        34: '专栏',
        35: '测评',
        36: '活动',
        37: '打卡',
      },
      mapLook: {
        31: '立即查看',
        32: '立即收听',
        33: '立即阅读',
        34: '立即查看',
        35: '立即测试',
        36: '立即参加',
        37: '立即打卡',
      },
    };
  },
  methods: {
    clickSourceItem() {
      // 跳转到对应的详情页面 msgType值 31视频，32音频，33图文，34专栏，35测评，36活动，37打卡
      // 将msgType值转为 goDetails.js中typeToUrl的key值
      let typeArr = [5, 5, 5, 9, 11, 7, 41];
      let type = Number(this.item.msgType);
      let courseType = type == 32 ? 1 : type == 33 ? 2 : 0;
      type = typeArr[type - 31];
      goDetails(this, type, this.item.subMsgId, '', courseType);
    },

  },
  activated() {

  },
  deactivated() { }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.icon-imgtext {
  color: #f0cd68;
}

.icon-video {
  color: #5b86df;
}

.icon-audio {
  color: #6bcaf1;
}

.icon-column {
  color: #82ccf6;
}

.icon-exam {
  color: #3a86f7;
}

.icon-clock {
  color: #ed776d;
}

.icon-activity {
  color: #f17763;
}
</style>
